<template>
   <div class="Con">
       <div class="Con-H">
        <div class="Con-H-L">
           <el-button  icon="el-icon-arrow-left" class="icon1" @click="but1()"></el-button>
        </div>
        <div class="Con-H-R">
            <span class="T-Name">{{t_namex}}</span>
        </div>
       </div>

       <div class="Con-C" v-if="this.CourseMag.length!=0"><!--内容部分-->
          <div class="Con-C-Item" v-for="(item,index) in CourseMag" :key="index" @click="itemBut(item)">
              <span>{{item.c_date}}</span>
              <span>{{item.c_name}}</span>
              <span class="Item_no">{{item.c_state|getState}}</span>
             
          </div>
       </div>

       <div class="Con-C" v-if="this.CourseMag.length==0">
         <div class="noCourse">
            <h2>确认完毕！</h2>
         </div>
       </div>

       <div class="Con-B">
             <el-pagination
         class="pageX"
        background
        layout="total,prev, pager, next,jumper"
        :total="total"
        :page-size="pageSize"
        :current-page.sync="pageNum"
        @current-change="changePage"
      >
      </el-pagination>
       </div>

       <!--对话框-->
       <el-dialog
        title="课程信息"
       :visible.sync="dialogVisible"
       class="Dialog"
       width="100%"
       id="Dialog"
       >
        <el-form ref="form" :model="clickCourse" label-width="95px">

         <el-form-item label="课室">
           <el-input :value="clickCourse.room" size="small" disabled ></el-input>
           </el-form-item>

           <el-form-item label="日期">
           <el-input :value="clickCourse.c_date" size="small" disabled></el-input>
           </el-form-item>

             <el-form-item label="周数">
           <el-input :value="clickCourse.c_week" size="small" disabled></el-input>
           </el-form-item>

            <el-form-item label="上课时间">
           <el-input :value="clickCourse.c_time" size="small" disabled></el-input>
           </el-form-item>

            <el-form-item label="课程名称">
            <el-input :value="clickCourse.c_name" size="small" disabled></el-input>
           </el-form-item>

            <el-form-item label="课程编号">
           <el-input :value="clickCourse.c_number" size="small" disabled></el-input>
           </el-form-item>

            <el-form-item label="课程类型">
           <el-input :value="clickCourse.c_type" size="small" disabled></el-input>
           </el-form-item>

             <el-form-item label="课程性质">
           <el-input :value="clickCourse.xz" size="small" disabled></el-input>
           </el-form-item>

            <el-form-item label="课程学时">
           <el-input :value="clickCourse.c_totaltime" size="small" disabled></el-input>
           </el-form-item>
            
             <el-form-item label="任课教师">
           <el-input :value="clickCourse.c_teacher" size="small" disabled></el-input>
           </el-form-item>

            <el-form-item label="上课班级">
           <el-input :value="clickCourse.c_classroom" size="small" disabled></el-input>
           </el-form-item>

              <el-form-item label="班级年级">
           <el-input :value="clickCourse.c_grade" size="small" disabled></el-input>
           </el-form-item>

             <el-form-item label="班级人数">
           <el-input :value="clickCourse.student_number" size="small" disabled></el-input>
           </el-form-item>

       </el-form>

     <span slot="footer" class="dialog-footer">
  
    <el-button type="primary" @click="but2()" class="but2">点 击 确 认</el-button>
  </span>
</el-dialog>
   </div>
</template>

<script>
import { axios1 } from '../../network';
import Qs from "qs";
import store from '../../store/index.js'
export default {
    data(){
        return{
            t_no:'',
            t_name:'',

            pageNum:1,
            pageSize:10,

            CourseMag:[],//未签到的课程信息
            total:null,

            dialogVisible:false,//对话框

            clickCourse:{},//点击的课程信息
        }
    },
    methods:{
         but1(){//退出
           this.$router.push("/teacherlogin").catch((err)=>{})
         },
         queryAll(){//获取该教师所有没有确定的信息
            let myData={
                tid:this.t_no,
                pageNum:this.pageNum,
                pageSize:this.pageSize
            }
            axios1({
                url:'course/notConfirmCourse',
                method:'post',
                data:Qs.stringify(myData)
            }).then((res)=>{
                if(res.data.data!==null){
                 // console.log(res)
                  this.total=res.data.data.total
                  this.CourseMag=res.data.data.data
                  //console.log(this.CourseMag)
                }else{
                  //console.log(res)
                  this.total=0
                  alert("您的课程都确认完了！")
                 // console.log(res)
                }
               
                //console.log(this.CourseMag)
            }).catch((res)=>{
                alert("请求失败！")
                console.log(res)
              
            })
         },
         changePage(){//分页
            this.queryAll()
         },
         itemBut(item){//点击事件
           this.dialogVisible=true
           this.clickCourse=item
           console.log(this.clickCourse)
          // console.log(item)
         },
         but2(){//教师确认
             axios1({
                url:'course/teacherConfirmCourse',
                method:'post',
                data:{
                    c_teacher:this.clickCourse.c_teacher,
                    c_name:this.clickCourse.c_name,
                    room:this.clickCourse.room,
                    c_date:this.clickCourse.c_date,
                    c_time:this.clickCourse.c_time
                }
             }).then((res)=>{
                //console.log(res)
                     this.$message({
                     message: '确认成功',
                     type: 'success'
                    });
                    setTimeout(()=>{location.reload()},700)
             }).catch((res)=>{
                alert('无法确认')
                console.log(res)
             })
            this.dialogVisible=false
         }
    },
    computed:{
          t_namex(){
            if(this.t_name==''){
                return "无数据"
            }else{
                return this.t_name
            }
           }
    },
    created(){
       store.commit('getTeacherNo')//获取cookie
       store.commit('getTeacherName')

        this.t_no=store.state.teacher_no
        this.t_name=store.state.teacher_name

        this.queryAll()
    },
    filters:{
        getState(x){
            if(x==0){
                return '点击确认'
            }else{
                return '已确认'
            }
        }
    }
}
</script>

<style scoped>
*{
    padding: 0px;
    margin: 0px;
}
div{
    box-sizing: border-box;
}
  .Con{
    width: 80%;
    height: 100%;
    margin: auto;
  
    max-width: 1000px;
  }
  .Con-H{
    width: 100%;
    height: 6%;
   
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgb(223, 220, 220);
    box-shadow: 1px 1px 3px rgb(228, 227, 227);
    background-color: rgb(49, 174, 247);
  }
  .Con-H-L{
    width: 30%;
    height: 100%;
   
    display: flex;
    align-items: center;
  }
  .Con-H-R{
    width: 70%;
    height: 100%;
   
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .icon1{
    width: 20%;
    height: 60%;
    font-size: 20px;
    margin-left: 10px;
    color: rgb(3, 39, 158);
    background-color: rgb(49, 174, 247);
  }
  .T-Name{
      margin-right: 20px;
      font-size: 18px;
      font-weight: 700;
      font-family: '宋体';
      color: rgb(2, 22, 39);
      box-shadow: 1px 1px 4px rgb(32, 32, 32);
      padding: 3px;
  }
  .Con-C{
    width: 100%;
    height: 85%;
   
    overflow: auto;
  }

  .Con-B{
    width: 100%;
    height: 9%;
    
    overflow: auto;
  }
  .Con-C-Item{
    height: 10%;
    width: 96%;
    margin: auto;
    box-shadow: 1px 1px 6px rgb(175, 174, 174);
    margin-top: 3%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 4px;
    font-family: '宋体';
    font-size: 20px;
    font-weight: 600;
    color: rgb(86, 87, 88);
    margin-bottom: 20px;
  }
  .Con-C-Item:hover{
    background-color: aliceblue;
  }
  .pageX{
    margin-top: 20px;
  }
  .Item_no{
    color: rgb(241, 148, 167);
  }
  .Dialog{
    max-width: 1000px;
    margin: auto;
  }
  .but2{
    padding: 5px;
    width: 40%;
  }
  .noCourse{
    width: 60%;
    height: 40%;
    margin: auto;
    box-shadow: 1px 1px 10px rgb(194, 192, 192);
    margin-top: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(119, 118, 116);
  }


  .el-input.is-disabled .el-input__inner{
     color: rgb(50, 50, 50)!important;
  }


  

  @media screen and (max-width:768px) {
    .Con{
        width: 100%;
    }
     .icon1{
    width: 50%;
    height: 70%;
    font-size: 16px;
    margin-left: 6px;
  }
  .T-Name{
    font-size: 14px;
  }
  .Con-C-Item{
    margin-top: 5%;
    font-size: 14px;
  }
  .pageX{
  margin-top: 10px;
  font-size: 14px;
  }
  .Dialog{
    width: 90%;
    margin: auto;
  }
  }
</style>